<template>

    <div>
        <el-card>
            <el-tabs type="card" v-model="tabs_activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="飞机" name="飞机">
                    <aircraft v-if="tabs_activeName == '飞机'"></aircraft>
                </el-tab-pane>
                <el-tab-pane label="火车" name="火车">
                    <train v-if="tabs_activeName == '火车'"></train>
                </el-tab-pane>
                <el-tab-pane label="集合点" name="集合点">
                    <bus v-if="tabs_activeName == '集合点'"></bus>
                </el-tab-pane>
                <el-tab-pane label="包车" name="包车">
                    <chartered_bus v-if="tabs_activeName == '包车'"></chartered_bus>
                </el-tab-pane>

            </el-tabs>
        </el-card>
    </div>

</template>

<script setup>

import { ref, reactive, onMounted, computed, watch } from 'vue'
import aircraft from './aircraft.vue'
import train from './train.vue'
import bus from './bus.vue'
import chartered_bus from './chartered_bus.vue'
onMounted(() => {
    tabs_activeName.value = '飞机'
})
const tabs_activeName = ref('飞机')
const handleClick = (tab, event) => {
    tabs_activeName.value = tab.props.name
}
</script>

<style scoped lang='scss'>

:deep(.el-tabs__item.is-active ) {
 
    background: #409EFF !important;
    color: #ffffff !important;
}
.form_Css>.el-form-item {
    margin-right: 10px !important;
}

.div_map {
    position: relative;
    left: 0;
    top: 0;
}

.map_input {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;

}

.map_input2 {
    width: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    top: 34px;

}

.div_bg:hover {


    background-color: darkgray;
}
</style>

<style>
.el-table .el-table__cell {
    padding: 0px !important;
}



#tab-aircraft_deliver {
    color: red;
}

#tab-train_deliver {
    color: red;
}

#tab-bus_deliver {
    color: red;
}

.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}
</style>
